<template>
    <div class="input">
        <input v-model="inputVal" :type="type" :placeholder="placeholder" @blur="handleBlur">
    </div>
</template>
<script>
import emitter from '../mixins/emitter.js'
export default {
  name: 'dj-input',
  mixins: [emitter],
  data () {
    return {
      inputVal: this.value
    }
  },
  props: {
    value: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text',
      validator: val => {
        return ['text', 'email', 'password', 'url', 'date'].includes(val)
      }
    },
    placeholder: {
      type: String
    }
  },
  watch: {
    value (newVal) {
      this.inputVal = newVal
    },
    inputVal (newVal) {
      this.$emit('input', newVal)
      this.dispatch('dj-form-item', 'form-change', newVal)
    }
  },
  methods: {
    handleBlur () {
      this.dispatch('dj-form-item', 'form-blur', this.inputVal)
    }
  }
}
</script>
<style lang="scss" scoped>
  .input{
    width: 100%;
    input{
      width: 100%;
      height: 40px;
      border: 1px solid #eee;
      border-radius: 4px;
      outline: none;
      padding-left:10px;
      font-size: 16px;
    }
  }
</style>
